<template>
	<view class="top_main" :class="[tabList[0] ? 'has_category_view' : '']"
		:style="{'--color':vuex_config.themeColor1}">
		<view class="top_fixed">
			<view class="search_view">
				<!-- <u-search class="search_input" @custom="searchConfirm" @search="searchConfirm" @clear="searchConfirm" v-model="searchInput" :height="58" placeholder="请输入关键词"></u-search> -->
				<view class="search_input">
					<sww-search :customStyle="{'padding':'10rpx 0'}" :keyWord="keyWord" @change="searchConfirm"
						:historyKey="historyKey">
					</sww-search>
				</view>
			</view>
			<scroll-view scroll-x class="scroll_box" v-if="tabList.length > 0">
				<view :class="['cate_item', value == item.pk_id ? 'is_check' : '']" v-for="(item, index) in tabList"
					:key="index" @click="setCurrentId(item)">{{ item.name }}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: -1
			},
			tabList: {
				type: Array,
				default: []
			},
			keyWord: {
				type: String,
				default: ''
			}, // 查询的关键词
			historyKey: {
				type: String,
				default: '-1'
			}, // 本地缓存key -1 表示不加载不保存
		},
		data() {
			return {
				searchInput: '',
			};
		},

		methods: {
			setCurrentId(item) {
				if (item.pk_id != this.value) {
					this.$emit('input', item.pk_id);
					this.$emit('searchConfirm')
				}
			},
			searchConfirm(name) {
				this.searchInput = name
				this.$emit('searchConfirm')
			}
		}
	};
</script>

<style scoped lang="scss">
	.top_main {
		box-sizing: content-box;
		height: 80rpx;

		&.has_category_view {
			height: 160rpx;
		}

		.top_fixed {
			box-sizing: content-box;
			position: fixed;
			top: 0;
			width: 100%;
			left: 0;
			z-index: 10;
		}
	}

	.search_view {
		background: #fff;
		// padding: 0 10rpx 0 30rpx;
		display: flex;
		align-items: center;
		// height: 80rpx;

		.search_input {
			flex: 1;
			overflow: hidden;
		}
	}

	.scroll_box {
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		background-color: #fff;

		.cate_item {
			display: inline-block;
			margin: 0 20rpx;
			line-height: 80rpx;
			position: relative;

			&::after {
				display: none;
				content: '';
				width: 100%;
				height: 6rpx;
				background-color: var(--color);
				border-radius: 4rpx;
				position: absolute;
				bottom: 10rpx;
			}

			&.is_check::after {
				display: block;
			}
		}
	}
</style>
